<template>
  <div class="viewright">
    <ul class="view-box">
      <router-link tag="li" to="/home" class="head-l">
        返回
      </router-link>
      <router-link tag="li" to="" class="head-c">
        每日食谱
      </router-link>
    </ul>
    <div class="box">
      <div class="subject" v-for="(item,index) in datas" :key="index">
      <div class="box-name">
        {{ item.name }}
      </div>
      <div class="food">
        <div class="food-1">
          <img :src="item.zao_pic" alt="">
          <span>早餐</span>
          <div></div>
        </div>
        <div class="food-1">
          <img :src="item.wu_pic" alt="">
          <span>午餐</span>
          <div></div>
        </div>
        <div class="food-1">
          <img :src="item.wan_pic" alt="">
          <span>晚餐</span>
          <div></div>
        </div>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
  export default {
    name:"ViewRight",
    data(){
      return{
        datas:[
          {
            name:"爸爸",
            zao_pic:require("../../../../assets/pimages/breakfast.jpg"),
            wu_pic:require("../../../../assets/pimages/lunch.jpg"),
            wan_pic:require("../../../../assets/pimages/dinner.jpg")
          },
          {
            name:"妈妈",
            zao_pic:require("../../../../assets/pimages/breakfast.jpg"),
            wu_pic:require("../../../../assets/pimages/lunch.jpg"),
            wan_pic:require("../../../../assets/pimages/dinner.jpg")
          }
        ]
      }
    }
  }
</script>

<style scoped>

.viewleft{
  width: 100%;
  height: 100%;
}
.view-box{
  width: 100%;
  height: 0.9rem;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #44bf91;
  z-index: 100;
}
li{
  float: left;
  text-align: center;
  line-height: 0.9rem;
  color: #f1f1f1;
  font-weight: normal;
}
.head-l{
  width: 20%;
}
.head-c{
  width: 60%;
}
.head-r{
  width: 20%;
}
.box{
  width: 100%;
  margin-top: 1rem;
}
.subject{
  width: 90%;
  margin: 0 auto;
}
.box-name{
  width: 1.1rem;
  height: 0.4rem;
  display: block;
  border-radius: 1rem;
  padding: 0.04rem;
  margin-top: 0.1rem;
  text-align: center;
  line-height: 0.4rem;
  background-color: #44bf91;
  color: #f1f1f1;
  font-size: 12px;
}
.food-1{
  margin-top: 0.2rem;
  position: relative;
}
.food span{
  position: absolute;
  top: 0.6rem;
  left: 3rem;
  font-size: 20px;
  color: #fff;
  z-index: 2;
}
.food-1 div{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,.3);
  z-index: 1;
}
</style>